import { Timeline, Button } from "antd";
import moment from "moment";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import WorkOrderInfo from "./workOrderInfo";
import WorkOrderInfoProcess from "./workOrderInfoProcess";

const TimeLineRecords = (props) => {

  const renderFileUrl = (item) => {
    let html =
      '<p style="margin: 0px;word-break: break-word;"><a style="color: #11CBFF;" href="' +
      
      "cloud/file/download/" +
      item.fileId +
      '">' +
      item.fileName +
      "</a></p>";
    return html;
  };

  return (
    <Timeline mode={"left"}>
      {props.orderProcessList.map((item, index) => {
        return (
          <Timeline.Item key={index} >
            <div style={{position:"relative",background:"#F1F1F1",padding:10,color:"#000000",borderRadius:8}}>
              <div>
                <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}>
                  <b>{item.createUser}</b>
                  <div>
                    {
                      item.solutionDuration != null ? <b style={{marginRight:10}}>{formatMessage({ id: 'workOrderProcessing.timeLineRecords.processingDuration' })}{item.solutionDuration}h</b> : ''
                    }
                    <b>{item.operationTypeStr}</b>
                  </div>
                </div>
                {
                  item.operationType == 1 && item.firstSubmitTicket ? (
                    <WorkOrderInfoProcess detail={item.firstSubmitTicket} />
                  ) : item.updateTicket ? <WorkOrderInfoProcess detail={item.updateTicket} updateTicket={true} /> : <div>{item.remarks ? item.remarks : ""}</div>
                }
                
                {item.attachFiles && item.attachFiles.length > 0 ? (
                  <div>
                    {formatMessage({ id: 'workOrderProcessing.timeLineRecords.attachments' })}:
                    {item.attachFiles.map((item) => {
                      return (
                        <div key={item.id} style={{marginBottom:10}}><a href={item.path} target="_blank" download={item.fileName}>{item.fileName}</a></div>
                      );
                    })}
                  </div>
                ) : (
                  ""
                )}

                {
                  item.durationAdjustReason && item.durationAdjustReason.trim().length > 0 && (
                        <div>
                          {formatMessage({ id: 'workOrderProcessing.timeLineRecords.durationAdjustReason' })}:{item.durationAdjustReason.trim()}
                        </div>
                    )
                }
              </div>

              <div style={{position:"absolute",left:"-95px",top:0,textAlign:"right"}}>
                <div>{item.createTime ? moment(item.createTime).format("YYYY-MM-DD") : moment().format("YYYY-MM-DD")}</div>
                <div style={{fontSize:'13px',color:"rgb(161, 161, 161)"}}>{item.createTime ? moment(item.createTime).format("HH:mm:ss") : moment().format("HH:mm:ss")}</div>
              </div>
            </div>
          </Timeline.Item>
        );
      })}
    </Timeline>
  );
};

export default TimeLineRecords;
